<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<fieldset id="app">
			<legend><h2>app实例</h2></legend>
			<p>{{zjz}}</p>
			<child1 @cl_every1="getC1Msg" :js1=zjz></child1>
			<child2 @cl_every2="getC2Msg" :js2=zjz2></child2>
		</fieldset>
		
		<template id="child1">
			<fieldset>
				<legend><h2>child1</h2></legend>
				<button type="button" @click="toC2" >向child2传值</button>
				<p>{{msg}}</p>
				<p>{{js1}}</p>
			</fieldset>
		</template>
		<template id="child2">
			<fieldset>
				<legend><h2>child2</h2></legend>
				<button type="button" @click="toC1">向child1传值</button>
				<p>{{msg}}</p>
				<p>{{js2}}</p>
			</fieldset>
		</template>
		
		<script type="text/javascript">
			let child1={
				template:'#child1',
				data(){
					return {
						msg:"hello my name is child1",
						jieshou:""
					}
				},
				methods:{
					toC2(){
						this.$emit("cl_every1",this.msg)
					}
				},
				props:{
					js1:{type:String}
				}
			}
			let child2={
				template:'#child2',
				data(){
					return {
						msg:"hello my name is child2",
						jieshou:""
					}
				},
				methods:{
					toC1(){
						this.$emit("cl_every2",this.msg)
					}
				},
				props:{
					js2:{type:String}
				}
			}
			new Vue({
				el:"#app",
				data:{
					zjz:'未接收',
					zjz2:'未接收',
				},
				methods:{
					getC1Msg(v){
						this.zjz2=v;
					},
					getC2Msg(v){
						this.zjz=v;
					}
				},
				components:{
					child1,
					child2
				}
			})
		</script>
	</body>
</html>
